<template>
  <button @click="updateCount">再来两斤</button>

  <div><p>华强:{{msg}}</p></div>
  <p>瓜摊老板:两块钱一斤</p>
  <p>华强:行,给我挑一个</p>
  <p>瓜摊老板:{{ count }}斤,{{price}}块</p>
  <p>华强:what's up 你这瓜皮是金子做的还是瓜粒子是金子做的?</p>
  <p>瓜摊老板:瞧你说的,你看看现在哪还有瓜啊,这都是大棚的瓜,你嫌贵我还嫌贵呢,你要不要吧</p>
  <p>华强:这瓜保熟吗?</p>
  <p>瓜摊老板:我开水果摊的能卖给你生瓜蛋子</p>
  <p>华强:我问你这瓜保熟吗?</p>
  <p>噔噔噔....印度运镜</p>
  <p>瓜摊老板:你是故意找茬不是?</p>
  <p>华强:这瓜要是保熟那我肯定要啊,那它要是不熟怎么办?</p>
  <p>瓜摊老板:这瓜要是不熟我自个吃了它满意了吧</p>

</template>

<script setup>
import { computed, onMounted } from 'vue';

const props = defineProps({
    msg:{
        type:String,
        default:''
    },
    count:{
        type:Number,
        default:0
    }
})
const price =computed(()=>props.count*2)
// 子组件无法直接修改父组件的数据只能通过$emit('事件名称',参数)
const emits = defineEmits(['updateCount'])
const updateCount = () => {
    emits('updateCount',props.count+2)
}
</script>